Angle configuration
File: angle_configuration.html (click for a live demo)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>math.js | angle configuration</title>
<style>
body, input, select {
font: 11pt sans-serif;
}
input, select, th, #result {
padding: 5px 10px;
}
th {
text-align: left;
}
</style>
<script src="https://unpkg.com/mathjs@14.0.1/lib/browser/math.js"></script>
</head>
<body>
<p>
This code example extends the trigonometric functions of math.js with configurable angles: degrees, radians, or gradians.
</p>
<table>
<tr>
<th>Angles</th>
<td>
<select id="angles">
<option value="deg">deg</option>
<option value="grad">grad</option>
<option value="rad">rad</option>
</select>
</td>
</tr>
<tr>
<th>Expression</th>
<td>
<input id="expression" type="text" value="sin(45)" />
<input id="evaluate" type="button" value="Evaluate">
</td>
</tr>
<tr>
<th>Result</th>
<td id="result"></td>
</tr>
</table>
<script>
let replacements = {}
// our extended configuration options
const config = {
angles: 'deg' // 'rad', 'deg', 'grad'
}
// create trigonometric functions replacing the input depending on angle config
const fns1 = ['sin', 'cos', 'tan', 'sec', 'cot', 'csc']
fns1.forEach(function(name) {
const fn = math[name] // the original function
const fnNumber = function (x) {
// convert from configured type of angles to radians
switch (config.angles) {
case 'deg':
return fn(x / 360 * 2 * Math.PI)
case 'grad':
return fn(x / 400 * 2 * Math.PI)
default:
return fn(x)
}
}
// create a typed-function which check the input types
replacements[name] = math.typed(name, {
'number': fnNumber,
'Array | Matrix': function (x) {
return math.map(x, fnNumber)
}
})
})
// create trigonometric functions replacing the output depending on angle config
const fns2 = ['asin', 'acos', 'atan', 'atan2', 'acot', 'acsc', 'asec']
fns2.forEach(function(name) {
const fn = math[name] // the original function
const fnNumber = function (x) {
const result = fn(x)
if (typeof result === 'number') {
// convert to radians to configured type of angles
switch(config.angles) {
case 'deg': return result / 2 / Math.PI * 360
case 'grad': return result / 2 / Math.PI * 400
default: return result
}
}
return result
}
// create a typed-function which check the input types
replacements[name] = math.typed(name, {
'number': fnNumber,
'Array | Matrix': function (x) {
return math.map(x, fnNumber)
}
})
})
// import all replacements into math.js, override existing trigonometric functions
math.import(replacements, {override: true})
// pointers to the input elements
const expression = document.getElementById('expression')
const evaluate = document.getElementById('evaluate')
const result = document.getElementById('result')
const angles = document.getElementById('angles')
// attach event handlers for select box and button
angles.onchange = function () {
config.angles = this.value
config.angles = this.value
}
evaluate.onclick = function () {
result.innerHTML = math.evaluate(expression.value)
}
</script>
</body>
</html>